<template>
<!--人才测评1-->
  <div class="content">
    <headers></headers>
    <!--<carousel></carousel>-->
    <p class="banner padding88"><img :src="sliderImg" alt="" height="200px" width="100%"></p>
    <div class="divider">
      <div class="auto">
        <router-link to="/">首页</router-link><span>></span>人才测评
      </div>
    </div>
    <div class="auto padding250">
      <p class="title">人才测评</p>
      <div class="container">
        <slot></slot>
      </div>
    </div>
    <footers></footers>
    <loginmodal  ref="login1"></loginmodal>
  </div>
</template>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less" rel="stylesheet/less">
  .banner{
    height: 260px;
  }
  .divider{
    height: 53px;
    background-color: #fff;
    font-size: 14px;
    color: #957960;
    line-height: 53px;
    text-align: left;
    margin-bottom: 30px;
    box-shadow: 5px 1px 10px #ccc;
    a{
      color: #957960;
      &:hover{
        color: #9C7649;
        font-weight: 700;
      }
    }
    span{
      margin: 0 10px;
    }
  }

.content{
  background-color: #f5f5f5;
  text-align: left;
  .title{
    font-size: 20px;
    color: #000;
    margin: 20px 0 25px 0;
    background-color: #fff;
    padding:15px 20px ;
  }
  .container{
    background-color: #fff;
    padding: 50px 0;
    .step{
      li{
        display: inline-block;
        text-align: center;
        font-size: 18px;
        color: #333;
        width: 24.7%;
        span{
          display: inline-block;
          position: relative;
          width: 30px;
          height: 30px;
          background-color: #ebebeb;
          border-radius: 50%;
          margin-top: 20px;
        }
        span:after{
          display: block;
          content: '';
          position: absolute;
          height: 11px;
          width: 300px;
          top:10px;
          left: 29px;
          background-color: #ebebeb;
        }
      }
      li:last-child span:after{
        display: none;
      }
      li.active{
        color: #957960;
        font-weight: 700;
        span{
          background-color: #957960;
        }
      }

    }
  }

}
</style>
<script type="text/ecmascript-6">
  import headers from './header'
  import footers from './footer'
  import carousel from './carousel'
  import loginmodal from './loginmodal'
  import {sliderPC} from '../../http'
    export default {
        name: 'ceping1',
        props: {},
        data() {
            return {
              sliderImg:'',
            };
        },
        methods: {
          getSlider(){
            //获取封面图
            sliderPC({sliderType:'4'}).then(res =>{
              this.sliderImg = res.data.slider.sliderImg;
            }).catch()
          }
        },
        created() {
          this.getSlider();
        },
        components: {
          headers,
          footers,
          carousel,
          loginmodal
        }
    }
</script>
